// =========先来两个小问题
// var arr = [100, 200, 30, 50, 120]  //求最小值

// 方式一
var arr = [100, 200, 30, 50, 120]
var min = arr[0]
arr.forEach(element =>
  min = element < min ? element : min
)
console.log(min)

//方式二
// var min = Math.min(100, 200, 30, 50, 12)
var arr = [100, 200, 30, 50, 120]
var min = Math.min(...arr)
console.log(min)


// var arr = [100, 200, 30, 50, 120]  //求最小值索引
//方式一 使用Jquery
var arr = [100, 200, 30, 50, 120]
var min = Math.min(...arr)
var mIndex = $.inArray(min, arr)
//方式二 原生JS findIndex() 满足条件的第一个元素的位置
var mIndex = arr.findIndex(item => item == min)



// 特点 等宽不等高
// 要求 图片展示，1图片居中不变形，2图片满屏不留白，3图片尺寸不固定

// 用Jquery写 大概率会出bug
$(function () { // 编程坏习惯 页面结构加载完成就会执行，并不会等图片资源加载完成
  waterFall()
})
// 改进版
$(window).on('load', function () {
  waterFall()
})

function waterFall() {
  var img = $('.box')
  //求出列数
  var ImgWidth = img.outerwidth()
  var screenWidth = $(window).width()
  var cols = parseInt(screenWidth / ImgWidth)

  // 每列高度值，用数组来存放
  var heightArr = []

  // 遍历图片，配合索引定位图片位置
  $.each(img, function (index, item) {
    var imgHeight = $(item).outerheight()
    // 是否是第一行
    if (index < cols) {
      heightArr[index] = imgHeight
    } else {
      // 高度数组最小值
      // 最小值索引

      $(item).css({
        position: 'absolute',
        top: 高度数组最小值 + 'px',
        left: 最小值索引 * ImgWidth + 'px'
      })
      // 更新高度
      heightArr[最小值索引] += imgHeight
    }
  })
}